<template>
    <div class="content">
        <div class="background_content">
            <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/loginBackground.png"
                   style="width:750px;height: 300px"></image>
        </div>
        <div class="login_content">
            <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
            <div style="display: flex;flex-direction: row;width: 750px">
                <div class="tittle_content" v-if="loginStatusType ==false">
                    <div class="tittle_account">
                        <text :class="[loginStatusType ==false?'tittle_account_title':'title_account_title_no']">账号登录</text>
                    </div>
                    <div style="margin-top: 10px" v-if="loginStatusType == false">
                        <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/loginLine.png"
                               class="under_line_left"></image>
                    </div>
                </div>
                <div class="tittle_content" v-if="loginStatusType ==true">
                    <div class="tittle_account">
                        <text :class="[loginStatusType ==true?'tittle_account_title':'title_account_title_no']">验证码登录</text>
                    </div>
                    <div style="margin-top: 10px" v-if="loginStatusType == true">
                        <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/loginLine.png"
                               class="under_line"></image>
                    </div>
                </div>
            </div>
            <div v-if="loginStatusType == true">
                <div class="button_content">
                    <div class="button_phone">
                        <input placeholder="请输入手机号/邮箱" class="phone_input" maxlength='11' type="number" v-model="phoneNumber"/>
                        <div class="section">
                            <text class="picker">+86</text>
                        </div>
                    </div>
                    <div class="button_phone">
                        <input placeholder="验证码" class="verification_input" maxlength='4' type="number" v-model="vCode"/>
                        <div class="verification_button" @click="verificationClick" v-if="isShow == true">
                            <text class="verification_button_title">获取验证码</text>
                        </div>
                        <div class="verification_button" v-if="isShow==false">
                            <text class="verification_button_title">{{second+"s"}}</text>
                        </div>
                    </div>
                </div>
                <div class="login_click" @click="loginClick">
                    <text class="login_click_title">登录</text>
                </div>
                <text class="logingSwitch" @click="loginStatusClick('0')">账号密码登录</text>
            </div>
            <div v-if="loginStatusType == false">
                <div class="button_content">
                    <div class="button_phone">
                        <input placeholder="请输入账号" class="phone_input"  v-model="account"/>
                    </div>
                    <div class="button_phone">
                        <input placeholder="请输入密码" class="verification_input"  v-model="password"/>
                    </div>
                    <div class="button_phone">
                        <input placeholder="请输入验证码" class="verification_inputCode"  v-model="code"/>
                        <div class="codeImg" @click="createCaptcha">
                            <image style="width: 200px;height: 80px" :src="codeImg"></image>
                        </div>
                    </div>
                </div>
                <div class="login_click" @click="accountClick">
                    <text class="login_click_title">登录</text>
                </div>
                <text class="logingSwitch" @click="loginStatusClick('1')">验证码登录</text>
            </div>
        </div>
        <div class="bottom_content">
            <text class="top_text">登录即代表您已同意</text>
            <div style="flex-direction: row;">
                <text class="bottom_text" @click="serviceClick">《用户协议》</text>
                <text class="bottom_text" @click="privacyClick">《隐私政策》</text>
            </div>
        </div>
    </div>
</template>

<script>
    import { list } from '../../api/tag';
    import {sendMsg, msgLogin,login} from '../../api/user'
    const umengPush = app.requireModule("eeui/umengPush");
	import {getInfo} from '../../api/mch.js'
    import md5 from 'js-md5';
    export default {
        data() {
            return {
                verifyCodeKey: '',
                lineShow: true,
                phoneNumber: '',
                isShow: true,
                second: 60,
                vCode: '',
                statusBarHeight: eeui.getStatusBarHeightPx(),
                loginStatusType:true,
                account:'',
                password:'',
                codeImg:'',
                code:'',
                imeiId:'',
                serviceId:"",
                privacyId:"",
                userInfoId:''
            }
        },
        created(){
            this.createCaptcha();
            this.initId()
            this.imeiId = eeui.getImei()
            let globalData = this.getGlobalData();
            let {userInfo} = globalData;
            if (userInfo != null) {
              this.userInfoId = userInfo.id;
            }

        },
        methods: {
            loginClick() {
                var _this = this
                if (this.vCode.length == 4) {
                    msgLogin({
                        username: this.phoneNumber,
                        verifyCode: this.vCode,
                        imeiId:this.imeiId
                    }).then(res => {
                        if (res.type == 'success') {
							this.globalData.token = res.data.token;
                            this.globalData.userInfo = res.data.userInfo
                            this.globalData.APP_BASE_API = 'http://g'+res.data.mchId+'.rzico.com:8080'
							this.setGlobalData(this.globalData)
                            this.loadMenus(res.data.token)


                        }
                    }).catch(error => {

                    })
                } else {
                    eeui.toast('请输入4位数验证码')
                }
            },
            verificationClick() {
                var _this = this
                if (this.phoneNumber == "" || this.phoneNumber.length != 11 || !(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(this.phoneNumber))) {
                    eeui.toast('请输入正确手机号码')
                    return;
                }
                sendMsg({
                    username: _this.phoneNumber,
                    tplKey: 'register'
                }).then(res => {
                    console.log(res)
                    this.timer()
                }).catch(error => {
                    _this.isShow= true
                })
                this.isShow = false
            },
            timer: function () {
                let promise = new Promise((resolve, reject) => {
                    let setTimer = setInterval(
                        () => {
                            this.second = this.second - 1
                            if (this.second <= 0) {
                                this.second = 60;
                                this.isShow = true;
                                resolve(setTimer)
                            }
                        }, 1000)
                });
                promise.then((setTimer) => {
                    clearInterval(setTimer)
                });
            },
            loginStatusClick(status){
                if (status == 0){
                    this.loginStatusType = false
                    this.createCaptcha()
                } else {
                    this.loginStatusType = true
                }
            },
            accountClick(){
                var _this = this
                if (_this.code ==''){
                    eeui.toast('请输入验证码')
                    return
                }
                if (_this.account == '') {
                    eeui.toast('请输入账号')
                    return;
                }
                if(_this.password == ''){
                    eeui.toast('请输入密码')
                    return;
                }
                login({
                    username: _this.account,
                    password: md5(_this.password),
                    verifyCodeKey: _this.getGlobalData().uuid,
                    verifyCode: _this.code,
                    imeiId:this.imeiId
                }).then(res => {
                    console.log(res)
                    if (res.type == 'success') {
                        this.globalData.token = res.data.token;
                        this.globalData.userInfo = res.data.userInfo;
                        this.globalData.APP_BASE_API = 'http://g'+res.data.mchId+'.rzico.com:8080'
                        this.setGlobalData(this.globalData)
                        this.loadMenus(res.data.token)
                    }
                }).catch(error => {
                    _this.createCaptcha()
                })
            },
			loadMenus(data){
				getInfo(
					data
				).then(res=>{
                    this.setPermission(res.data.menus)
                    umengPush.deleteAlias(this.userInfoId, 'userId', result=>{});
                    umengPush.addAlias(res.data.userInfo.id, 'userId', result=>{
                        console.log(result)
                        this.userInfoId = res.data.userInfo.id
                        eeui.closePage()

                    });
				})
			},
            createCaptcha() {
                var _this = this
                _this.codeImg = 'https://api.rzico.com:8443/user/getVerifyCode?verifyCodeKey=' + this.getGlobalData().uuid + '&date=' + new Date().getTime()
            },
            //获取文章id
            initId() {
//                let params = {
//                    mchId: this.getGlobalData().mchId,
//                    type: 0
//                };
//                list(params)
//                    .then(res => {
//                        console.log(res);
//                        res.data.data.forEach(item => {
//                            if (item.name === '服务协议') {
//                                this.serviceId = item.id;
//                            }
//                            if (item.name === '隐私政策'){
//                                this.privacyId = item.id;
//                            }
//                        });
//                    })
//                    .catch(err => {
//                        console.log(err);
//                    });
            },
            serviceClick(){
                let params = {
                    mchId: this.getGlobalData().mchId,
                    //tagIds: this.serviceId,
                    title:'用户协议'
                };
                eeui.openPage({ url: 'root://pages/member/detail/detail.js', params, statusBarType: "immersion",statusBarStyle: false }, result => {
                    console.log('跳转到详情页成功');
                });
            },
            privacyClick(){
                let params = {
                    mchId: this.getGlobalData().mchId,
                    //tagIds: this.privacyId,
                    title:'隐私政策'
                };
                console.log(this.privacyId)
                console.log(params)
                eeui.openPage({ url: 'root://pages/member/detail/detail.js', params, statusBarType: "immersion",statusBarStyle: false }, result => {
                    console.log('跳转到详情页成功');
                });
            },
        }
    }
</script>

<style scoped>
    .content, body {
    }

    .login_content {
        padding-top: 80px;
        /*height: 824px;*/
        display: flex;
        align-items: center;
        flex-direction: column;
        z-index: 1;
    }

    .tittle_content {
        /*width: 660px;*/
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 50px;
    }

    .account {
        margin-top: 60px;
    }

    .tittle_account {
        height: 41px;
        margin-top: 40px;
    }

    .tittle_account_title {
        font-size: 44px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        line-height: 48px;
    }

    .title_account_title_no{
        font-size: 44px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 48px;
    }

    .tittle_verification {
        height: 41px;
        font-size: 44px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
    }

    .under_line {
        width: 219px;
        height: 11px;
    }
    .under_line_left{
        width: 170px;
        height: 11px;
    }

    .bottom_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 750px;
        position: absolute;
        bottom: 100px;
    }

    .top_text {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.3;
    }

    .bottom_text {
        margin-top: 13px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .login_click {
        width: 650px;
        height: 84px;
        background-image: linear-gradient(to right, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*position: absolute;*/
        /*top: 600px;*/
        margin-top: 100px;
    }

    .login_click_title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .background_content {
        position: absolute;
        width: 750px;
        height: 300px;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0.8;
    }


    .button_content {
        display: flex;
        flex-direction: column;
        margin-top: 150px;
        margin-left: 0px;
    }

    .button_phone {
        width: 654px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        height: 106px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(212, 215, 220, 1);
    }

    .phone_input {
        width: 564px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_input {
        width: 480px;
        height: 106px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_inputCode{
        width: 300px;
        height: 106px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 56px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(212, 215, 220, 1);
    }

    .verification_button_title {
        border-radius: 4px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .picker {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .logingSwitch{
        font-size: 30px;
        text-align: right;
        padding-top: 30px;
        padding-bottom: 20px;
        color: rgba(26, 26, 30, 0.5);
    }
</style>
